<template>
    <view class="rx-center">
        <view class="rx-title">{{ i18n('announcement', '公司公告') }}<span @click="more">...</span></view>
        <view class="rx-news"  v-for="(item,index) in newsList" :key="index" @click="readNews(item)">
            <view class="rx-news-center">
                <view class="rx-news-le">
                    <view class="rx-news-name">{{ item.subject }}</view>
                    <view class="rx-news-keywords">{{item.keywords}}</view>
                </view>
                <view class="rx-news-image" v-if="item.imgFileId">
                    <image :src="imageUrl(item.imgFileId)"/>
                </view>
            </view>
            <view class="rx-user">
                <view><my-icon style="margin-right: 0.25rem" type="icon-people"></my-icon><span style="font-size: 0.8rem">{{item.authorName}}</span></view>
                <view><my-icon style="margin-right: 0.25rem" type="icon-clock"></my-icon><span style="font-size: 0.8rem">{{item.createTime}}</span></view>
            </view>
        </view>
    </view>
</template>

<script>
import GatewayApi from "@/api/Gateway/GatewayApi";

export default {
  name: "RxNews",
  props: {
    num: Number,
  },
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.init();
  },
  mounted() {

  },
  methods: {
    i18n(name, text, key) {
      return this.$ti18(name, text, "portalLang", key);
    },
    init() {
      if (!this.num) return;
      let params = {
        pageNo: 1,
        pageSize: this.num
      }
      GatewayApi.listNews(params).then(res => {
        this.newsList = res.data;
      })
    },
    more(){
      //更多公告
      uni.navigateTo({
        url: '/views/modules/announcement/announcementList'
      });
    },
      readNews(record){
          uni.navigateTo({
              url: '/views/modules/announcement/announcementDetails?pkId='+record.pkId
          });
      },
  }

}
</script>

<style scoped>
.rx-title {
    font-size: 1rem;
    padding: 0.7rem 1rem;
    letter-spacing: 0rem;
    color: rgba(51, 51, 51, 1);
    display: flex;
    justify-content: space-between;
}
.rx-center {
    border-radius: .5rem;
    background: #fff;
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
    box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
    overflow: hidden;
}
.rx-news{
    padding:1rem 1rem;
    border-top: 1px solid rgba(232, 232, 232, 1);
}
.rx-news-center{
    display: flex;
    overflow: initial;
    align-items: center;
}
.rx-news-le{
    flex: 1;
    overflow: hidden;
}
.rx-news-name{
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: bold;
}
.rx-news-keywords{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.8rem;
    color: rgb(110 121 133);
    margin-top: 0.25rem
}
.rx-news-image{
    width: 5rem;
    height: 4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-left: 0.5rem;
}
.rx-news-image image{
    width: 100%;
    height: 100%;
}
.rx-user{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 1rem;
}
</style>
